<template>
  <div class="pad5">
    <div class="padb5">
      <title-a>批量出库</title-a>
    </div>
    <div class="bcf pad5 round3">
      <div class="flex1 padl10">
        <ez-item-picker v-model="itemSelected"></ez-item-picker>
      </div>
    </div>
    <div class="mart5">
      <div class="flex-r flex-fill">
        <div style="width: 600px;">
          <div v-show="itemInfo.base.length === 0">
            <div>选择需要入库的项目后，查看库存情况和库位明细</div>
          </div>
          <div class="bcf round3 ofh pad5 " v-show="itemInfo.base.length > 0">
            <title-a>库存情况</title-a>
            <div class="mar5 bcf lh2">
              <div v-for="item in itemInfo.base" :key="item.id">
                <div class="flrc pad5">
                  <div class="flex2">{{ item.skuCode }}</div>
                  <div class="flex3">
                    <div>{{ item.skuText }}</div>
                    <div class="c12">{{ item.note }}</div>
                  </div>
                  <div class="flex1">{{ item.num }}</div>
                </div>
              </div>
            </div>
            <title-a>
              <div class="flrc">
                <div class="flex1">可用量</div>
                <div>
                  <mu-button @click="useAll" color="primary" small flat>全部出库</mu-button>
                </div>
              </div>
            </title-a>
            <div class="mar5 bcf lh2">
              <div style="max-height: 400px;overflow-y: scroll">
                <div class="flrc pad5">
                  <div class="flex2">批次</div>
                  <div class="flex1">入库数量</div>
                  <div class="flex1">余量</div>
                  <div class="flex1">库位</div>
                  <div class="flex2">入库时间</div>
                  <div style="width: 50px;">-</div>
                </div>
                <div v-for="item in itemInfo.log" :key="item.id">
                  <div class="flrc pad5 bdbda">
                    <div class="flex2">{{ !item.batchCode ? '-' : item.batchCode }}</div>
                    <div class="flex1">{{ item.numIn }}</div>
                    <div class="flex1">{{ item.numLeft }}</div>
                    <div class="flex1">{{ item.pos }}</div>
                    <div class="flex2">
                      <Time :time="item.createAt" type="datetime"></Time>
                    </div>
                    <div style="width: 50px;">
                      <mu-button @click="useIt(item)" small icon>
                        <mu-icon value="send"></mu-icon>
                      </mu-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex1 marl5 padr5">
          <div class="bcf round3 pad5" v-show="outList.length > 0">

            <title-a>出库条目</title-a>
            <!--                        <div class="list-style-2 marb10">出库条目</div>-->
            <div class="flrc bc13 pad3 mar2" v-for="(item,index) in outList" :key="item.batchCode">
              <div class="fwb padl5">{{ index + 1 }}.</div>
              <div class="flex2 padlr9">{{ item.itemText }}</div>
              <div class="flex1 padlr9">{{ item.itemCode }}</div>
              <div class="flex1 padlr9">库位：{{ item.itemPos }}</div>
              <div class="flex2 padlr9">
                <div>
                  <mu-text-field type="number" :value="item.num" @input="(v)=>{item.num = v*1}"
                                 full-width></mu-text-field>
                </div>
                <div>
                  <mu-slider :step="1" :max="item.max" v-model="item.num" display-value></mu-slider>
                </div>
              </div>
              <div class="flrc padl10">
                <mu-button small icon @click="delRow(index)">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </div>
            </div>
            <div class="flex-r flex-start pad10">
              <div class="c12 mart5">合计：</div>
              <div class="flex1">
                <div class="flrc bc13 pad3 bdda mar1" v-for="item in outListSummary" :key="item.code">
                  <div class="flex1">{{ item.text }}({{ item.code }})</div>
                  <div class="flex1 padl10 fwb tar">x {{ item.num }}</div>
                </div>
              </div>
            </div>
            <div class="mart10 bdtda padt10 bdc12">
              <!--                            <div class="list-style-2">出库单信息</div>-->
              <title-a>出库单信息</title-a>
              <div class="mart5">
                <EzData v-model="model" :config="formConfig"></EzData>
              </div>
            </div>

            <div>
              <mu-button @click="submit" color="primary">出库</mu-button>
            </div>
            <!--                        <div class="dev bc13 pad10 mart10">-->
            <!--                            {{model}}-->
            <!--                        </div>-->
            <!--                        <div class="dev bc13 pad10 mart10">-->
            <!--                            {{outList}}-->
            <!--                        </div>-->
            <!--                        <div class="dev bc13 pad10 mart10">-->
            <!--                            {{outListSummary}}-->
            <!--                        </div>-->
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import EzItemPicker from "@/pages/v1/wms/componets/EzItemPicker";
import EzData from "@/comps/EzData";
import formBuilder from "@/comps/form/formBuilder";
import apiIOType from "@/pages/v1/wms/IOType/js/apiIOType";
import TitleA from "@/comps/comm/TitleA";
import apiDepartment from "@/pages/v1/wms/Department/js/apiDepartment";
import apiItemMain from "@/pages/v1/wms/ItemMain/js/apiItemMain";
import apiInLog from "@/pages/v1/wms/InLog/js/apiInLog";

export default {
  name: "ez_wms_out_many",
  components: {TitleA, EzData, EzItemPicker,},
  data() {
    let out = formBuilder()
    out.addCascade("departmentId", "部门", 3).setApi(apiDepartment.urlTree)
    out.addCascade("typeId", "出库类型", 3)
        .setApi(apiIOType.urlTree)
        .setApiParams({root: 2})
    out.addText("sn", "出库单号", 3)
    out.addText("applier", "经办人", 3)
    out.addText("usage", "用途", 12)
    out.addText("note", "备注", 12).setMulti(true).setRows(3)

    return {
      itemSelected: "",
      itemInfo: {
        base: [],
        log: []
      },
      outList: [],
      outListSummary: {},
      numKey: 0,
      formConfig: out,
      model: {},
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      console.log(this.outList)
      this.$http.post("/wms/admin/OutLog/out_many", {
        list: this.outList,
        model: this.model,
      }, res => {
        if (res.code === 2001) {
          //处理成功
          this.$toast.success(res.message)
          //重置数据
          this.getItemStorageInfo(this.itemSelected)
          this.outList = []
          this.outListSummary = {}
        }
      })
    },
    setItemNumInput(e, item) {
      console.log(e.target.value)
      let v = e.target.value * 1
      if (v > item.max) {
        v = item.max
        this.numKey = Math.random()
      }
      item.num = v
      item.percent = v / item.max * 100;
    },
    setItemNumSlide(v, item) {
      item.num = item.max * v / 100
    },
    delRow(index) {
      this.outList = this.$utils.arrayDelIndex(this.outList, index)
    },
    useIt(item) {
      for (let index in this.outList) {
        let row = this.outList[index]
        if (row.inLogId === item.id) {
          //已经添加过该批次 跳过
          return false
        }
      }
      //添加到出库列表
      this.outList.push({
        inLogId: item.id,
        itemId: item.item.id,
        itemCode: item.item.code,
        itemText: item.item.text,
        itemPos: item.pos,
        heapCode: item.heapCode,
        num: 0,
        percent: 0,
        max: item.numLeft,
      })
    },
    useAll() {
      // this.outList = []
      //添加到出库列表
      for (const item of this.itemInfo.log) {
        let find = false
        for (let index in this.outList) {
          let row = this.outList[index]
          if (row.inLogId === item.id) {
            //已经添加过该批次 跳过
            find = true
          }
        }
        if (find) continue
        this.outList.push({
          inLogId: item.id,
          itemId: item.item.id,
          itemCode: item.item.code,
          itemText: item.item.text,
          itemPos: item.pos,
          heapCode: item.heapCode,
          num: item.numLeft,
          percent: item.numLeft,
          max: item.numLeft,
        })
      }

    },
    getItemStorageInfo(itemId) {
      //获取物资的库存情况和库存余量
      apiItemMain.findBy({_where: {itemId: itemId}, _dumps: ["item"]}, res => {
        this.itemInfo.base = res
      })
      apiInLog.findBy({
        _where: {
          itemId: itemId,
          numLeft__ne: 0
        },
        _dumps: ["type","item","department"],
        _order: ["-id"],
        page: 0,
        limit: 0
      }, res => {
        this.itemInfo.log = res
      })
    },
    sumOutListData() {
      this.outListSummary = {}
      for (let index in this.outList) {
        let item = this.outList[index]
        if (this.outListSummary[item.itemId] === undefined) {
          this.outListSummary[item.itemId] = {
            code: item.itemCode,
            text: item.itemText,
            num: 0,
          }
        }
        this.outListSummary[item.itemId].num += item.num
      }
    }
  },
  watch: {
    itemSelected(v) {
      this.getItemStorageInfo(v)
    },
    outList: {
      deep: true,
      handler() {
        this.sumOutListData()
      }
    }
  }
}
</script>

<style scoped>

</style>